<script setup>
import { ref, computed} from 'vue'

let id = 0

const newTodo = ref('')
const todos = ref([])
const hideCompleted =ref(false)

const ID = ref('id')
const filteredTodos = computed(() => {
  return hideCompleted.value ? todos.value.filter((t) => !t.done) : todos.value
})

const tTodosRef = ref(null)


  function addTodo(){
    todos.value.push({id : id++, text : newTodo.value, done : false})
    newTodo.value = ''
  }
  
  function removeTodo(todo){
    todos.value = todos.value.filter((d) => d !== todo)
  }

</script>

<template>
  <div>

  <div id="ID">
    <h1 :class="ID">
    {{ newTodo }}
  </h1>
    </div>

  <div>
    <input v-model="newTodo" required placeholder="请输入内容">
    <button @click="addTodo">ADD TODO</button>
  </div>
  
  <div>
    <ul>
      <dt :class="ID">AddList</dt>
      <li v-for="todo in filteredTodos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <span ref="tTodosRef" :class="{done : todo.done}">{{ todo.text }}</span>
        <button @click="removeTodo(todo)">X</button>
      </li>
      <button @click="hideCompleted = !hideCompleted">
        {{hideCompleted ? "show all" : "hide completed"}}
      </button>
    </ul>
  </div>


  </div>
  
  
</template>

<style scoped>
.id{
  color : red;
}
</style>
<style scoped>
.done{
  text-decoration : line-through;
  color : green;
}
</style>